import { Button, message, Upload, Input, Table, Space, TablePaginationConfig, Popconfirm } from 'antd';
import { SearchOutlined, CloudUploadOutlined,DeleteOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd/es/upload/interface';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import { getAllFile } from '@/api/file';
import { Document, Page } from 'react-pdf';

import "./index.less"
import { getPDFFileAct } from '@/redux/actions/pdf';
import { useDispatch, useSelector } from 'react-redux';
import { ReducersType } from '@/redux/store';



const searchData = {
    page: 1,
    pageSize: 10,
    type: "pdf"
}

export default function Form3() {

    const props: UploadProps = {
        beforeUpload: (file) => {

            return false;
        },

        showUploadList: false
    };
    const columns: ColumnsType<studentType> = [
        {
            title: '文件名',
            dataIndex: 'name',
            key:"name",
            width:400,
            ellipsis: true,
        },
        {
            title: '地址',
            dataIndex: 'url',
            width:600,
            key:"name",
            // ellipsis: true,
        },
        {
            title: '创建人',
            dataIndex: 'userId',
            key:"userId",
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key:"createTime",
        } ,{
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a className='edit' key={record.id}  >预览</a>
                    <a className='delete' key={record.id} href="#" >删除</a>
                </Space>
            )
        },
    ];

    const PageChange = () => {

    }

    let pageConfig: TablePaginationConfig = {
        position: ['bottomRight'],
        defaultCurrent: 1,
        total: 0,
        showTotal: (total) => `共 ${total} 条`,
        pageSizeOptions: [10, 20, 30, 40, 50],
        showSizeChanger: true,
        showQuickJumper: true,
        onChange: PageChange,
        defaultPageSize: 10,
        pageSize: 10,
        current: 1
    }

    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const onSelectChange = (newSelectedRowKeys: React.Key[], selectedRows: any) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        console.log("selectRowkeys Row", selectedRows);


    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    const [data, setData] = useState()



    //#region 组件初始化
    const dispatch = useDispatch()
    const [loading,setLoading] = useState(false)
    const [pageOption, setPageOption] = useState(pageConfig)
    const PDFData = useSelector((state:ReducersType)=>{
       return state.pdfReducer
    })

    useEffect(() => {
        dispatch(getPDFFileAct(searchData))
    }, [])
    //#endregion


    return (
        <div className="Form3">
            <div className='header flex_a'>
                <Input size="middle" placeholder="请输入姓名" prefix={<SearchOutlined />} style={{ width: 250 }} allowClear />
                <Upload {...props} className={"upBtn"} >
                    <Button size="middle" type="primary" icon={<CloudUploadOutlined />} >PDF 上传</Button>
                </Upload>
                <Button type='primary' danger className={"deleteBtn"} icon={<DeleteOutlined />} >批量删除</Button>
            </div>
            <div className='Table'>
                <Table rowSelection={rowSelection} columns={columns} dataSource={PDFData} pagination={pageOption} rowKey={item => item.id} loading={loading} />
            </div>
        </div>
    )
}